<template>
  <div class="table-head">
    <a-card :title="t['设备']">
      <a-form :model="{}" auto-label-width :label-col-props="{ span: 8 }">
        <div>
          <div>
            <a-form-item :label="t['输入关键字']" class="w-[200px]">
              <div>
                <a-input-search
                  v-model="query.keyword"
                  :placeholder="`id`"
                  allows-clear
                  @keydown.enter="search"
                  @search="search"
                  class="w-[200px]"
                />
              </div>
            </a-form-item>
            <a-form-item :label="t['数据范围']">
              <div class="w-[300px]">
                <Scope
                  :include="['-', '1', '3']"
                  type="select"
                  v-model="query.scope"
                  @change="changeScope"
                >
                </Scope>
              </div>
            </a-form-item>
            <div class="flex">
              <div class="form-item">
                <a-form-item :label="t['是否在线']">
                  <a-radio-group
                    :type="'button'"
                    v-model="query.status"
                    @change="search"
                    :options="translateOptions(onlineOptions)"
                  ></a-radio-group>
                </a-form-item>
              </div>
            </div>

            <div class="form-item">
              <a-form-item :label="t['门店']">
                <div class="w-[180px]">
                  <SelectorListSelector v-model="query.filterId" @change="search" />
                </div>
              </a-form-item>
            </div>
            <div class="form-item">
              <a-form-item :label="t['设备升级']">
                <HardwareUpdate type="lcd" :selected-keys="keys" />
              </a-form-item>
            </div>
            <a-form-item :label="t['数据导入导出']">
              <a-button-group>
                <a-button @click="relations">
                  {{ t["绑定关系"] }}
                  <template #icon>
                    <IconDownload />
                  </template>
                </a-button>
                <a-button @click="manifest">
                  {{ t["设备清单"] }}
                  <template #icon>
                    <IconDownload />
                  </template>
                </a-button>
                <BatchUpgrade />
                <Transfer :keys="keys" />
                <a-button :disabled="keys.length <= 0" @click="recycleDevice" v-if="false">
                  {{ t["回收"] }}
                </a-button>
              </a-button-group>
            </a-form-item>
          </div>
        </div>
      </a-form>

      <div class="flex justify-between">
        <div class="flex gap-3">
          <div v-auth>
            <a-button type="primary" @click="create">
              {{ t["新建"] }}
              <template #icon>
                <IconPlus />
              </template>
            </a-button>
          </div>
          <a-button @click="list">{{ t["刷新"] }}</a-button>
          <a-button @click="resetForm">{{ t["重置"] }}</a-button>
        </div>
        <div>
          <a-button-group>
            <a-button v-if="false" @click="combinedScreen" :disabled="keys.length < 2">
              联屏
            </a-button>
            <a-button :disabled="keys.length === 0" @click="recoverDevice" v-if="false">
              回收
            </a-button>
            <a-button :disabled="keys.length === 0" @click="batchDisplay('1')">
              {{ t["批量显示"] }}
            </a-button>
            <a-button :disabled="keys.length === 0" @click="batchDisplay('0')">
              {{ t["批量隐藏"] }}
            </a-button>
          </a-button-group>

          <a-button type="text" @click="group">{{ t["自动分组"] }}</a-button>
        </div>
      </div>
    </a-card>

    <Time v-model="displayLink"></Time>
  </div>
</template>

<script setup lang="ts">
import {
  automaticGrouping,
  deviceConfig,
  lcdManifest,
  lcdRecover,
  lcdRelations
} from "@/api/service/lcd-device/lcd-device";

import BatchUpgrade from "../bulk-options/BatchBindLCD.vue";

import Scope from "@/components/selector/Scope.vue";
import { onlineOptions } from "@/data/options/options";
import { Message } from "@arco-design/web-vue";
import Transfer from "../bulk-options/Transfer.vue";
import { create, list } from "../data/curd";
import { keys, query, resetQuery } from "../data/table";
import Time from "./Time.vue";

const displayLink = ref();

const storeId = ref<string>("");

const recycleDevice = () => {
  lcdRecover(keys.value);
};
const t = translate("公共模块");
const group = async () => {
  const { msg } = await automaticGrouping();
  list();
  Message.info(msg);
};
const manifest = () => {
  lcdManifest();
};

const resetForm = () => {
  resetQuery();
  list();
};
const combinedScreen = () => {
  displayLink.value = true;
};
const relations = () => {
  lcdRelations();
};

const translateModal = ref(false);
const search = () => {
  query.value.pageNum = 1;
  list();
};
const changeScope = () => {
  query.value.pageNum = 1;
  list();
};
const recoverDevice = () => {
  lcdRecover(keys.value);
};
const batchDisplay = async (display: "1" | "0") => {
  await deviceConfig({
    display,
    mediaIds: keys.value
  });
  list();
};
</script>

<style lang="scss" scoped>
:deep(.arco-card-header) {
  border: none;
}

.form-item {
  display: flex;
  width: fit-content;
}
</style>
